<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <router-link to="/Settlements/PaymentShow">付费管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>付费申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="标题:" prop="paymentTitle">
            <el-input v-model="form.paymentTitle" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="付款金额:" prop="paymentPrice">
            <el-input v-model="form.paymentPrice" placeholder="请输入付款金额" />
        </el-form-item>
        <el-form-item label="结算方式:" style="width: 1000px;" prop="billingMethod">
            <el-radio-group v-model="form.billingMethod">
                <el-radio value="微信支付">微信支付</el-radio>
                <el-radio value="支付宝支付">支付宝支付</el-radio>
                <el-radio value="银联支付">银联支付</el-radio>
                <el-radio value="企业转账">企业转账</el-radio>
                <el-radio value="线下支付">线下支付</el-radio>
                <div>
                    <el-radio value="其它">其它</el-radio>
                    <el-input v-if="form.billingMethod==='其它'" v-model="form.otherBillingMethod" placeholder="请输入结算方式" style="width: 120px;margin-left: 30px;" />
                </div>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="支付对象:" prop="paymentMethods">
            <el-input v-model="form.paymentMethods" placeholder="请输入支付对象" />
        </el-form-item>
        <el-form-item label="开户行:" prop="paymentBank">
            <el-input v-model="form.paymentBank" placeholder="请输入开户行" />
        </el-form-item>
        <el-form-item label="银行账号:" prop="bankAccount">
            <el-input v-model="form.bankAccount" placeholder="请输入银行账号" />
        </el-form-item>
        <el-form-item label="付款日期:" prop="paymentDate">
            <el-col :span="11">
                <el-date-picker v-model="form.paymentDate" value-forma="YYYY-MM-DD" type="date" placeholder="请选择付款日期"
                    style="width: 100%" />
            </el-col>
        </el-form-item>
        <el-form-item label="用途描述:" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入用途描述" />
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="form.paymentRemark" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item label="票据附件:" prop="ticketAttachments">
            <el-upload class="avatar-uploader" action="http://113.44.151.225:8000/swrite/api/Payment/UploadFiles"
                :show-file-list="false" :on-success="handleAvatarSuccess">
                <img v-if="form.ticketAttachments" :src="'http://113.44.151.225:8000/swrite/Pic/' + form.ticketAttachments"
                    class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item style="margin-left: 20%;">
            <el-button type="primary" @click="submitFormed(ruleFormRef)">提交审批</el-button>
            <el-button @click="router.push('PaymentShow')">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">保存草稿</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

import { Plus } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const show1 = ref(false)
const form = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    // updatedBy: "",  // 更新人
    // updatedDate: "",     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除
    paymentId: 0,        // 支付ID
    companyID: "",    // 公司ID
    user_Id: 0,    // 用户ID
    paymentTitle: "",    // 支付标题
    description: "",    // 描述
    paymentPrice: '',    // 支付金额
    billingMethod: "",    // 结算方式
    paymentMethods: "",     // 支付方式
    otherBillingMethod: "",    // 其他结算方式
    paymentBank: "",    // 开户行
    bankAccount: "",    // 银行账号
    paymentApplicant: "张三",    // 申请人
    paymentDate: "",    // 支付日期
    paymentRemark: "",    // 支付备注
    ticketAttachments: "",    // 票据附件
    approvalStatus: 0,      // 审批状态
    approver: ""    // 审批人
})

//表单校验
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    paymentTitle: [
        { required: true, message: '标题不能为空', trigger: 'blur' },
    ],
    paymentPrice: [
        { required: true, message: '付款金额不能为空', trigger: 'blur' },
    ],
    billingMethod: [
        { required: true, message: '结算方式不能为空', trigger: 'blur' },
    ],
    paymentMethods: [
        { required: true, message: '支付对象不能为空', trigger: 'blur' },
    ],
    paymentBank: [
        { required: true, message: '开户行不能为空', trigger: 'blur' },
    ],
    bankAccount: [
        { required: true, message: '银行账户不能为空', trigger: 'blur' },
    ],
    paymentDate: [
        { required: true, message: '付款日期不能为空', trigger: 'blur' },
    ],
    description: [
        { required: true, message: '用途描述不能为空', trigger: 'blur' },
    ],
    ticketAttachments: [
        { required: true, message: '票据依附不能为空', trigger: 'blur' },
    ],
})

const handleAvatarSuccess= (val:any) => {
    form.ticketAttachments=val;
}

//提交审批
const submitFormed= async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            form.approvalStatus=2;
            axios.post('/swrite/api/Payment/Create',form)
            .then(res=>{
                if(res.data.code == 0)    {
                    ElMessage.success('提交成功');  
                    router.push('PaymentShow')
                }
            })
            .catch(err=>{
                console.log(err);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//保存草稿
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            form.approvalStatus=1;
            axios.post('/swrite/api/Payment/Create',form)
            .then(res=>{
                if(res.data.code == 0)    {
                    ElMessage.success('保存成功');  
                    router.push('PaymentShow')
                }
            })
            .catch(err=>{
                console.log(err);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


onMounted(() => {

})
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>